import img from './img.png'
import img01 from './img_1.png'


const PrincipleOfResponsiveData = () => {
    return (<div>
        话术
        <h1>一般面试官会问Games是如何实现响应式数据的</h1>
        <p>那么我们要解释什么是响应式数据原理、我们要知道什么是响应式</p>
        <p>在我这边理解响应式是指：</p>
        <p>当数据改变后Vue会通知到使用该数据的代码，比如说视图渲染使用了一个数据，那么当这个数据改变后，视图会响应式的自动更新</p>
        <div>
            <img width={"200px"} height={"250px"} src={img} alt=""/>
        </div>
        <p>就是我创建一个Vue的组件，然后我在组件里面的data里面放了一个name属性</p>
        <p>name属性我设置为hello</p>
        <p>那么我如果要修改页面上的这个数据的呈现的话</p>
        <p>我只需要vm.name=h,然后就达到了修改呈现的效果</p>
        <p>你就不需要手动的去修改dom来跟新数据了</p>
        <h1>什么是响应式数据原理呢</h1>
        <p>Vue呢它是通过哪个Object.defineProperty,它来更新定义data中的所有属性，就那个data啊，通过Object.defineProperty</p>
        <p>它可以使数据的一个获取还有设置 get and set 增加一个拦截的功能</p>
        <p>，他们拦截属性的获取，然后依赖的收集 拦截属性的更新操作，进行一个通知</p>
        从源码角度来说
        <div>
            <img width={"200px"} height={"250px"} src={img01} alt=""/>
        </div>
        <p>那么从源码角度中Vue更具体的一个操作</p>
        <p>Vue它是如何实现的（数据响应）</p>
        <p>首先Vue，它使用的是使用了那个initial data，初始化用户传入的参数</p>
        <p>然后使用new Observer对数据进行观测</p>
        <p>、如果数据是一个对象类型，那么它就会调用this.work(value)对对象进行一个处理</p>
        <p>它内部使用defineReactive循环对象属性，定义响应式变化</p>
        <p>它的内核核心就是使用的Object.defineProperty重新定义数据</p>
        刚刚说的是对象，那么vue是如何观测数组变化的呢
        <h1>Vue是如何检测数组变化</h1>
    </div>)
}
export default PrincipleOfResponsiveData
